<script lang="ts" setup>
import toLine from '@/utils';

withDefaults(
  defineProps<{
    icon?: string;
    max?: number;
    isDot?: boolean;
    value: number | string;
  }>(),
  {
    icon: 'Bell',
    max: 99,
    isDot: false,
    value: 0,
  },
);
</script>

<template>
  <el-popover placement="bottom" :width="300" trigger="hover">
    <template #default>
      <slot></slot>
    </template>
    <template #reference>
      <el-badge :value="value" :max="max" :is-dot="isDot">
        <component :is="`el-icon-${toLine(icon)}`"></component>
      </el-badge>
    </template>
  </el-popover>
</template>

<style lang="scss" scoped></style>
